<!--
 * @Author: MuQuanyu(MQy)
 * @Date: 2025-10-11 13:21:55
 * @LastEditTime: 2025-10-11 17:09:23
 * @email: muquanyu@outlook.com
-->
<template>
  <div class="saslist-box">
    <el-input v-model="searchKey" class="responsive-input" :placeholder="searchPlaceholder" :prefix-icon="Search"
      @input="search" />
    <div ref="scrollContainer" class="list-box" @scroll="handleScroll">
      <div class="sasl-list-item" v-for="item in dataList" @click="handleClickItem(item)">
        <img style="width: 25px; height: 25px; border-radius: 50%;" :src="imgUrl + item.imgUrl"></img>
        <span>{{ item.title }}</span>
      </div>
      <LoadingSVG v-show="isLoading" size="20px"></LoadingSVG>
    </div>
    <div class="saslist-bottom">查看全部人员</div>
  </div>
</template>

<script setup lang="ts">
import { Search } from "@element-plus/icons-vue";
import LoadingSVG from "@/components/LoadingSVG/index.vue";
import { ref } from "vue";
const props = defineProps({
  searchPlaceholder: String,
  dataList: Array<any>,
  isLoading: Boolean, // 是否正在加载
  isRadio: Boolean // 是否单选模式
});
const emits = defineEmits(["loading", "search", "radio-select"]);
const searchKey = ref();
const scrollContainer = ref(null);
const imgUrl = import.meta.env.VITE_IMG_BASE_URL
const handleScroll = () => {
  const container: any = scrollContainer.value;
  const num = props.dataList?.length ? props.dataList?.length : 0;
  if (props.isLoading) {
    return;
  }
  if (container?.scrollHeight - num * 10 - container?.scrollTop - 2 <= 0) {
    emits("loading");
  }
};
const search = () => {
  emits("search", searchKey.value);
};
const handleClickItem = (item: any) => {
  if (props.isRadio) {
    emits("radio-select", item)
  }
}
</script>

<style lang="scss" scoped>
.saslist-box {
  width: 200px;
  display: flex;
  flex-direction: column;

  .list-box {
    height: 200px;
    overflow-y: auto;
    padding: 5px;
  }

  .saslist-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    font-size: 14px;
    border-top: 1px solid var(--el-border-color);
    cursor: pointer;
  }

  .saslist-bottom:hover {
    color: var(--el-color-primary);
  }
}


.sasl-list-item {
  border-radius: 5px;
  display: flex;
  align-items: center;
  padding: 5px;
  border-bottom: 1px dashed;
  gap: 10px;
  font-size: 14px;
  margin-bottom: 5px;
  cursor: pointer;
}

.sasl-list-item:hover {
  background: var(--el-color-primary-light-7);
}
</style>
